<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,user-scalable=no" />
    <title>NCUT 猫</title>
    <!-- jquery -->
    <script src="./lib/jquery.min.js"></script>
    <script src="./lib/jquery.form.js"></script>
    <!-- popper -->
    <script src="./lib/popper.min.js"></script>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="./lib/bootstrap.min.css">
    <link rel="stylesheet" href="./lib/bootstrap-theme.min.css">
    <script src="./lib/bootstrap.min.js"></script>
    <script src="./lib/bootstrap.bundle.min.js"></script>
    <!-- vue -->
    <script src="./lib/vue.js"></script>
    <!-- js -->
    <script src="./js/ConstData.js"></script>
    <script src="./js/navManager.js"></script>
    <script src="./js/foot-tab-bar.js"></script>
    <script src="./js/tool.js"></script>
    <script src="./js/feed.js"></script>
    <!-- css -->
    <link rel="stylesheet" type="text/css" href="./css/mainFrame.css">
    <link rel="stylesheet" type="text/css" href="./css/tab-bar.css">
    <!-- icon -->
    <script src="./icon/iconfont.js"></script>
    <style type="text/css">
    .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
    </style>
</head>

<body>
    <span id="head_top" class="head_top">
        <span class="top_icon"></span>
        <span class="top_text">北方工大猫协</span>
        <span id="top_nav_box" class="top_nav_box">
            <span id="top_nav" class="top_nav">
                <!-- JS ADD -->
            </span>
        </span>
    </span>
    <span class="head">
        <span class="top_box">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-news"></use>
            </svg>
            <span class="text">关注公众号, 动态活动不迷路</span>
            <span class="action">关注</span>
        </span>
        <ul id="head_nav" class="nav nav-tabs">
            <li id="hn_feed_cat" class="active"><a href="javascript:void(0);" onclick="nav_click(true)">喂猫</a></li>
            <li id="hn_adopt_cat"><a href="javascript:void(0);" onclick="nav_click(true)">领养</a></li>
            <li id="hn_about_cat"><a href="javascript:void(0);" onclick="nav_click(true)">文创</a></li>
        </ul>
        <div id="head_carousel" class="carousel slide" data-bs-ride="carousel">
            <!-- 指示符 -->
            <ul class="carousel-indicators">
                <li data-bs-target="#head_carousel" data-bs-slide-to="0" class="active"></li>
                <li data-bs-target="#head_carousel" data-bs-slide-to="1"></li>
                <li data-bs-target="#head_carousel" data-bs-slide-to="2"></li>
            </ul>
            <!-- 轮播图片 -->
            <div class="carousel-inner">
                <div class="carousel-item active"> <img src=""> </div>
                <div class="carousel-item"> <img src=""> </div>
                <div class="carousel-item"> <img src=""> </div>
            </div>
            <script>
            $.get("/img/cat-rand?limit=3", r => {
                if (!r.success) return;
                for (let i = 0; i < 3 && i < r.result.length; i++) {
                    let hash = r.result[i].hash;
                    $(`#head_carousel .carousel-inner img:eq(${i})`).attr('src', '/img/cat/' + hash);
                }
            });
            </script>
        </div>
    </span>
    <div id="main-content">
        <!-- 喂猫 -->
        <span class="main-content" style="display: none;">
            <span class="title">喂猫活动</span>
            <span class="module-list">
                <span class="module s-module realThread" data-real="报名喂猫">报名喂猫</span>
                <span class="module s-module realThread" data-real="流程介绍">流程介绍</span>
                <span class="module b-module">猫咪照片周榜界面</span>
                <span class="module b-module">猫咪照片投稿通道</span>
            </span>
            <span class="title">猫咪人气周榜</span>
            <a class="title title-right" href="cat_rank.html">查看详情&nbsp;&gt;&gt;&gt;</a>
            <span class="module-list">
                <span class="module rank-line" id="rankList">
                    <!-- 排行榜, 应改为JS添加 -->
                    <span class="module rank s-rank low"><img class="sketch" :src="getHotCatImgUrl(2)"><span class="name">{{getHotCatName(2)}}</span><span class="hot">{{getHotCatAmount(2)}}</span><span class="ranking">2</span></span>
                    <span class="module rank f-rank low"><img class="sketch" :src="getHotCatImgUrl(1)"><span class="name">{{getHotCatName(1)}}</span><span class="hot">{{getHotCatAmount(1)}}</span><span class="ranking">1</span></span>
                    <span class="module rank t-rank low"><img class="sketch" :src="getHotCatImgUrl(3)"><span class="name">{{getHotCatName(3)}}</span><span class="hot">{{getHotCatAmount(3)}}</span><span class="ranking">3</span></span>
                </span>
                <span id="cat_rank"></span>
            </span>
        </span>
        <!--领养-->
        <span class="main-content" style="display: none;">
            <span class="title">领养活动</span>
            <span class="module-list">
                <span class="module s-module realThread" data-real="领养计划">领养计划</span>
                <span class="module s-module realThread" data-real="新手科普">新手科普</span>
            </span>
            <span class="title">等待领养</span>
            <span class="module-list" id="waitAdopt">
                <!-- 领养列表 , JS添加 -->
            </span>
        </span>
        <!--文创-->
        <span class="main-content" style="display: none;">
            <span class="title">猫协文创</span>
            <span class="title" style="display:block;font-size: 0.7em;">暂未开放...</span>
            <span class="module-list" style="display: none;">
                <!-- 文创列表 , 应改为JS添加 -->
                <span class="module m-module goods">
                    <img class="sketch" src="https://placehold.it/256x256&text=GOODS">
                    <span class="name">产品A名称</span>
                    <br>
                    <span class="price">50.00</span>
                    <span class="info">3人种草</span>
                </span>
                <span class="module m-module goods">
                    <img class="sketch" src="https://placehold.it/256x256&text=GOODS">
                    <span class="name">产品A名称</span>
                    <br>
                    <span class="price">50.00</span>
                    <span class="info">3人种草</span>
                </span>
                <span class="module m-module goods">
                    <img class="sketch" src="https://placehold.it/256x256&text=GOODS">
                    <span class="name">产品A名称</span>
                    <br>
                    <span class="price">50.00</span>
                    <span class="info">3人种草</span>
                </span>
                <span class="module m-module goods">
                    <img class="sketch" src="https://placehold.it/256x256&text=GOODS">
                    <span class="name">产品A名称</span>
                    <br>
                    <br>
                    <span class="price">50.00</span>
                    <span class="info">3人种草</span>
                </span>
            </span>
        </span>
    </div>
</body>

</html>